<!-- 会员列表弹窗 -->
<template>
  <a-modal
    :maskClosable="false"
    :destroyOnClose="true"
    title="筛选单位人员"
    centered
    :width="1200"
    :bodyStyle="{ paddingBottom: '5px', paddingTop: '15px' }"
    v-model="visible"
    @cancel="handleCancel"
    :afterClose="afterClose"
  >
    <a-form-model layout="inline" ref="form">
      <a-row :gutter="12">
        <a-col :md="6" :sm="12">
          <a-form-model-item label="关键词">
            <a-input
              v-model="queryParam.keyword"
              placeholder="姓名/单位/手机号/单位职务"
              allowClear
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="12">
          <a-form-model-item label="单位身份">
            <a-select
              v-model="queryParam.memberRoleType"
              mode="multiple"
              placeholder="请选择单位身份"
              allowClear
              :showArrow="true"
              class="min-width-15"
            >
              <a-select-option
                v-for="dict in Dict.getLocal('companyIdentityDict')"
                :key="dict.dictValue"
                :value="dict.dictValue"
                >{{ dict.dictLabel }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="12">
          <a-form-model-item label="用户类型">
            <a-select
              v-model="queryParam.applyType"
              placeholder="请选择"
              :showArrow="true"
              allowClear
              mode="multiple"
              class="min-width-15"
            >
              <a-select-option
                v-for="dict in Dict.getLocal('applyTypeDict')"
                :key="dict.dictValue"
                :value="dict.dictValue"
              >
                {{ dict.dictLabel }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="12">
          <a-form-model-item label="会员职务">
            <a-select
              v-model="queryParam.levelIds"
              placeholder="请选择会员职务"
              mode="multiple"
              allowClear
              :showArrow="true"
              style="width: 150px"
            >
              <a-select-option v-for="item in downList.member_level_list" :value="item.id" :key="item.id"
                >{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="6" :sm="12">
          <a-form-model-item label="小程序">
            <a-select
              v-model="queryParam.isLogin"
              placeholder="请选择"
              mode="multiple"
              allowClear
              :showArrow="true"
              style="width: 150px"
            >
              <a-select-option
                v-for="dict in Dict.getLocal('isLoginDict')"
                :key="dict.dictValue"
                :value="dict.dictValue"
              >
                {{ dict.dictLabel }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="12">
          <a-form-model-item label="公众号">
            <a-select
              v-model="queryParam.isOfficialAccount"
              placeholder="请选择"
              mode="multiple"
              allowClear
              :showArrow="true"
              style="width: 150px"
            >
              <a-select-option
                v-for="dict in Dict.getLocal('isOfficialAccountDict')"
                :key="dict.dictValue"
                :value="dict.dictValue"
              >
                {{ dict.dictLabel }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="12">
          <a-form-item label="用户标签">
            <a-select
              placeholder="请选择标签"
              v-model="queryParam.tagId"
              allowClear
              :showArrow="true"
              mode="multiple"
              class="min-width-18"
            >
              <a-select-option v-for="(item, idx) in labelLists" :key="idx" :value="item.id" :label="item.name">
                <span role="img" :aria-label="item.name"></span>
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="6" :sm="12">
          <a-button class="_mt-4" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button class="_mt-4" style="margin-left: 8px" @click="handleReset">重置</a-button>
        </a-col>
      </a-row>
    </a-form-model>

    <div class="_pb-10 disFlxAC">
      <span class="_mr-10 color9"
        >已勾选<span class="colorZS _pl-2 _pr-2 fw-7">{{ selectedRowKeys.length }}</span
        >位报名人员</span
      >
      <a-button v-if="total" type="primary" ghost @click="checkedAllMemberList"
        >{{ isAllChecked ? '取消勾选' : '勾选' }}"筛选条件"下全部<span class="fw-7 _pl-2 _pr-2">{{ total }}</span
        >位报名人员</a-button
      >
    </div>

    <s-table
      size="default"
      ref="table"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :rowSelection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,

        getCheckboxProps: record => ({
          props: {
            disabled: defaultSelectedRowKeys.includes(record.id) || record.disabled
          }
        })
      }"
    >
      <!-- 用户信息 -->
      <template slot="userInfo" slot-scope="text, record">
        <div class="disFlxAC">
          <a-avatar v-if="record.avatar" size="default" :src="record.avatar" />
          <a-avatar v-else size="default" icon="user" />
          <div class="_pl-10">
            <div>
              <span>{{ record.leadingName }}</span>
            </div>
            <div>{{ record.phonenumber }}</div>
          </div>
        </div>
      </template>

      <!-- 单位身份 -->
      <span slot="memberRoleType" slot-scope="text">
        <DictTag :options="Dict.getLocal('companyIdentityDict')" :value="text" isText showBorder />
      </span>

      <!-- 用户类型 -->
      <span slot="applyType" slot-scope="text">
        <DictTag :options="Dict.getLocal('applyTypeDict')" :value="text" isText showBorder />
      </span>

      <!-- 小程序登录状态 -->
      <span slot="isLogin" slot-scope="text">
        <DictTag :options="Dict.getLocal('isLoginDict')" :value="text" isText />
      </span>

      <!-- 公众号关注状态 -->
      <span slot="isOfficialAccount" slot-scope="text">
        <DictTag :options="Dict.getLocal('isOfficialAccountDict')" :value="text" isText />
      </span>
    </s-table>
    <template slot="footer">
      <a-button class="cancel" @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleConfirm">确定</a-button>
    </template>
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import DictTag from '@/components/DictTag'

import { queryNotRegistration } from '@/api/activity/activity'
import { allNotRegistrationIds } from '@/api/activity/enroll'
import { memberLevelGetDownList } from '@/api/system/system'
import { getTagUserList } from '@/api/member/grouping'

export default {
  components: {
    STable,
    DictTag
  },
  data() {
    return {
      visible: false,
      queryParam: {
        keyword: undefined,
        applyType: [],
        levelIds: [],
        memberRoleType: [],
        tagId: [],
        isLogin: [],
        isOfficialAccount: []
      },
      columns: [
        { title: '用户', scopedSlots: { customRender: 'userInfo' }, width: 180 },
        { title: '单位', dataIndex: 'companyName', width: 180 },
        { title: '单位职务', dataIndex: 'companyPosition', width: 100 },
        { title: '单位身份', dataIndex: 'memberRoleType', width: 120, scopedSlots: { customRender: 'memberRoleType' } },
        { title: '用户类型', dataIndex: 'applyType', width: 120, scopedSlots: { customRender: 'applyType' } },
        { title: '会员职务', dataIndex: 'levelName', width: 120 },
        { title: '小程序', dataIndex: 'isLogin', width: 100, scopedSlots: { customRender: 'isLogin' } },
        {
          title: '公众号',
          dataIndex: 'isOfficialAccount',
          width: 120,
          scopedSlots: { customRender: 'isOfficialAccount' }
        }
      ],
      loadData: async parameter => {
        return queryNotRegistration(Object.assign(parameter, this.queryParam)).then(res => {
          this.total = res.data.total
          res.data.records.forEach(v => {
            this.$set(v, 'disabled', this.isAllChecked && this.selectedRowKeys.includes(v.id))
          })
          return res
        })
      },
      defaultSelectedRowKeys: [],
      selectedRowKeys: [],
      onlyCheckedUser: false,
      downList: {
        member_level_list: [],
        label_list: []
      },
      total: 0,
      isAllChecked: false,
      labelLists: []
    }
  },
  watch: {},

  methods: {
    moduleShow(keys) {
      this.defaultSelectedRowKeys = keys || []
      // this.isAllChecked = this.defaultSelectedRowKeys.length > 0
      this.selectedRowKeys = keys || []
      if (!this.selectedRowKeys.length) {
        this.isAllChecked = false
      }
      this.getMemberLevelGetDownList()
      this.getLabelList()
      this.visible = true
    },
    getLevelText(id) {
      let item = this.downList.member_level_list.find(f => f.id === id) || {}
      return item.name 
    },
    async getMemberLevelGetDownList() {
      let res = await memberLevelGetDownList()
      this.downList.member_level_list = res.data || []
    },
    getLabelList() {
      getTagUserList({ type: 0 }).then(res => {
        this.labelLists = res.data
      })
    },

    refresh(isRefresh = true) {
      this.$refs.table.refresh(isRefresh)
    },
    handleSearch() {
      this.$refs.table.refresh(true)
    },
    //表格数据选中
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    clearParams() {
      Object.keys(this.queryParam).forEach(k => {
        this.queryParam[k] = undefined
      })
    },
    afterClose() {
      this.clearParams()
    },
    handleReset() {
      this.clearParams()
      this.handleSearch()
    },
    handleCancel() {
      this.visible = false
      this.selectedRowKeys = []
      this.onlyCheckedUser = false
    },
    async checkedAllMemberList() {
      this.isAllChecked = !this.isAllChecked
      if (this.isAllChecked) {
        let res = await allNotRegistrationIds({ ...this.queryParam })
        this.selectedRowKeys = res.data.appUserInfoIds
      } else {
        this.selectedRowKeys = []
        this.defaultSelectedRowKeys = []
      }
      this.refresh(false) // 刷新表格禁用条件
    },
    handleConfirm() {
      this.visible = false
      this.$emit('confirmUser', this.selectedRowKeys)
      this.$emit('add')
      this.selectedRowKeys = []
      this.onlyCheckedUser = false
    }
  }
}
</script>
<style scoped>
.cancel {
  margin-right: 10px;
}
</style>
